<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #D5D5D5;
			}
			.box{
				background-color: white;
				width: 230px;
				margin: 10px;
			}
			.box h2{
				background-color: black;
				color: white;
				font-size: 16px;
			}
			.box dl dt{
				height: 30px;
				line-height: 30px;
				list-style: none;
				font-weight: bold;
				font-size: 14px;
				padding-left: 26px;
			}
			.box dl dd{
				background-color: #FFFFFF;
				padding-left: 24px;
				line-height: 20px;
				border-bottom: 1px dashed black;
			}
			.box dl dd:last-of-type{
				border: 0;
			}
			.box dl dd a{
				text-decoration:none;
				color: #737373;
				text-indent:2em;
				font-size: 12px;
			}
			.box dl dt:nth-of-type(1){
				background-image: url(icon_01.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(2){
				background-image: url(icon_02.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(3){
				background-image: url(icon_03.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(4){
				background-image: url(icon_04.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(5){
				background-image: url(icon_05.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(6){
				background-image: url(icon_06.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(7){
				background-image: url(icon_07.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(8){
				background-image: url(icon_08.gif);
				background-repeat: no-repeat;
			}
			.box dl dt:nth-of-type(9){
				background-image: url(icon_09.gif);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>全部分类</h2>
			<dl>
				<dt>护肤</dt>
					<dd>
						<p>
							<a href="#">洁面</a>
							<a href="#">化妆水</a>
							<a href="#">喷雾</a>
							<a href="#">美容液</a>
							<a href="#">眼霜</a>
						</p>
						<p>						
							<a href="#">眼部精华</a>
							<a href="#">眼膜</a>
							<a href="#">面膜</a>
							<a href="#">面膜贴</a>
						</p>
						<p>
							<a href="#">水洗面膜</a>
							<a href="#">免洗面膜</a>
							<a href="#">精华</a>
							<a href="#">精油</a>
						</p>
						<p>
							<a href="#">凝露</a>
							<a href="#">乳液</a>
							<a href="#">面霜</a>
							<a href="#">日霜</a>
							<a href="#">晚霜</a>
						</p>
					</dd>
				<dt>彩妆</dt>
					<dd>
						<p>
							<a href="#">卸妆</a>
							<a href="#">防晒</a>
							<a href="#">隔离</a>
							<a href="#">BB霜</a>
							<a href="#">粉底</a>
							<a href="#">粉饼</a>
						</p>
						<p>
							<a href="#">睫毛膏</a>
							<a href="#">眼影</a>
							<a href="#">唇彩</a>
							<a href="#">腮红</a>
							<a href="#">眼线笔</a>
						</p>
						<p>
							<a href="#">底妆</a>
							<a href="#">遮瑕</a>
							<a href="#">蜜粉</a>
							<a href="#">眉笔</a>
							<a href="#">美甲</a>
						</p>
					</dd>					
				<dt>香氛</dt>
					<dd>
						<p>
							<a href="#">男香</a>
							<a href="#">女香</a>
							<a href="#">小Q装</a>
							<a href="#">中性香水</a>
						</p>
					</dd>					
				<dt>身体护理</dt>
					<dd>
						<p>
							<a href="#">洗发</a>
							<a href="#">护发</a>
							<a href="#">沐浴</a>
							<a href="#">身体乳</a>
							<a href="#">手足护理</a>
						</p>
						<p>
							<a href="#">护手霜</a>
							<a href="#">纤体</a>
							<a href="#">身体精油</a>
							<a href="#">颈部护理</a>
						</p>
						<p>
							<a href="#">个人护理</a>
							<a href="#">卫生用品</a>
							<a href="#">脱毛</a>
						</p>	
					</dd>			
				<dt>礼盒套装</dt>
					<dd>
						<p>
							<a href="#">护肤套装</a>
							<a href="#">身体护理套装</a>
							<a href="#">彩妆套装</a>
						<p>
						<p>
							<a href="#">旅行装</a>
							<a href="#">香水套装</a>
							<a href="#">男士套装</a>
						</p>
					</dd>	
				<dt>美容工具</dt>
					<dd>
						<p>
							<a href="#">护肤</a>
							<a href="#">彩妆</a>
							<a href="#">美发</a>
							<a href="#">美体</a>
							<a href="#">美甲</a>
						<p>
						<p>
							<a href="#">美容仪器</a>
							<a href="#">其他美容工具</a>
						</p>
					</dd>	
				<dt>母婴专区</dt>
					<dd>
						<p>
							<a href="#">奶粉</a>
							<a href="#">尿裤湿巾</a>
							<a href="#">母婴洗护</a>
						</p>
					</dd>	
				<dt>男士专区</dt>
					<dd>
						<p>
							<a href="#">洁面</a>
							<a href="#">爽肤水</a>
							<a href="#">面霜</a>
							<a href="#">男香</a>
						<p>
						<p>
							<a href="#">眼霜</a>
							<a href="#">凝胶</a>
							<a href="#">乳液</a>
							<a href="#">精华</a>
							<a href="#">沐浴</a>
						</p>
					</dd>	
				<dt>食品保健</dt>
					<dd>
						<p>
							<a href="#">瘦身类</a>
							<a href="#">保健类</a>
							<a href="#">美容类</a>
							<a href="#">食品类</a>
						</p>
					</dd>	
			</dl>
		</div>
	</body>
</html>
